<!DOCTYPE html>
<html lang="en-us"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title> Hi Weather </title>
    <meta name="description" content="A Weather Website"/>
    <meta name="author" content="vito"/>

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <!-- #CSS Links -->
    <!-- Basic Styles -->
    <link rel="stylesheet" type="text/css" media="screen"
          th:href="@{/static/lib/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" media="screen"
          th:href="@{/static/lib/css/font-awesome.min.css}"/>
    <!--<link rel="stylesheet" type="text/css" href="http://cdn.oesmith.co.uk/morris-0.5.1.css"/>-->

    <!-- #FAVICONS -->
    <link rel="shortcut icon" type="image/x-icon"
          th:href="@{/static/imgs/favicon/favicon.ico}"/>
    <link rel="icon" type="image/x-icon"
          th:href="@{/static/imgs/favicon/favicon.ico}"/>

    <!-- Animate.css -->
    <link rel="stylesheet" th:href="@{/static/css/animate.css}"/>
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" th:href="@{/static/lib/css/icomoon.css}"/>
    <!-- Magnific Popup-->
    <link rel="stylesheet" th:href="@{/static/css/magnific-popup.css}"/>
    <!-- Owl Carousel -->
    <link rel="stylesheet" th:href="@{/static/lib/css/owl.carousel.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/lib/css/owl.theme.default.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/lib/css/morris.css}"/>

    <!-- Cards -->
    <link rel="stylesheet" th:href="@{/static/css/cards.css}"/>

    <link rel="stylesheet" th:href="@{/static/lib/css/weather-icons.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/lib/css/weather-icons-wind.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/lib/css/meteocons.css}"/>

    <!-- Modernizr JS -->
    <script th:src="@{/static/lib/js/modernizr-2.6.2.min.js}"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script th:src="@{/static/lib/js/respond.min.js}"></script>
    <![endif]-->

</head>
<body>

<div id="fh5co-page">
    <nav class="fh5co-nav-style-1" role="navigation"
         data-offcanvass-position="fh5co-offcanvass-left">
        <div class="container">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 fh5co-logo">
                <a href="javascript:void(0)" class="js-fh5co-mobile-toggle fh5co-nav-toggle"><i></i></a>
                <a href="javascript:void(0)">Hi Weather</a>
            </div>
            <div class="col-lg-6 col-md-5 col-sm-5 text-center fh5co-link-wrap">
                <ul data-offcanvass="yes">
                    <li class="active"><a th:href="@{/}">当地天气</a></li>
                    <li><a th:href="@{/weather/forecast/}">天气预报</a></li>
                    <li><a th:href="@{/weather/history/}">历史天气</a></li>
                    <li><a th:href="@{/weather/aqi/}">空气质量</a></li>
                </ul>
            </div>
            <span class="col-lg-3 col-md-4 col-sm-4 text-right">
                <button href="javascript:void(0)" class="btn btn-default btn-outline btn-lg"
                        data-toggle="modal" data-target="#location_modal"
                        style="color: lightgoldenrodyellow">
                    更改默认城市
                </button>
            </span>
        </div>
    </nav>

    <div class="fh5co-cover fh5co-cover-style-2 js-full-height" data-stellar-background-ratio="0.5"
         data-next="yes" style="background-image: url(/static/imgs/full_1.jpg);">
		  	<span class="scroll-btn wow fadeInUp" data-wow-duration=".5s" data-wow-delay="1.4s">
				<a href="#">
                    <span class="mouse"><span></span></span>
                </a>
			</span>
        <div class="fh5co-overlay"></div>

        <div class="fh5co-cover-text">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 full-height js-full-height">
                        <div class="fh5co-cover-intro text-center">
                            <p class="cover-text-lead wow fadeInUp" data-wow-duration="1s"
                               data-wow-delay=".5s"><i class="fa fa-map-marker"
                                                       style="color: #b1811d;"></i>
                                <span id="district_name">Some Place</span>
                            </p>
                            <h2 class="cover-text-sublead wow fadeInUp" data-wow-duration=".5s"
                                data-wow-delay=".8s">天气实况</h2>
                        </div>
                    </div>
                    <div class="col-md-4 full-height js-full-height">
                        <div class="fh5co-cover-intro text-center">
                            <p class="cover-text-lead wow fadeInUp" data-wow-duration="1s">
                                <i class="wi" style="font-size: 3em; color: #e6e6e6;"
                                   id="current_weather_icon"></i>
                            </p>
                            <p class="wow fadeInUp" data-wow-duration="0.5s" data-wow-delay="1.1s">
                                <a href="#">
                                    <span style="font-size: 3em; color: #e6e6e6;"
                                          id="current_weather"></span>
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4 full-height js-full-height">
                        <div class="fh5co-cover-intro text-left"
                             style="color: #e6e6e6; font-size: 2em">
                            <p class=" wow fadeInUp" data-wow-duration="0.5s">
                                <i class="wi wi-fw wi-thermometer"></i>
                                <span>温度: </span><span id="current_temperature">暂无</span><i
                                    class="wi wi-fw wi-celsius"></i>
                            </p>
                            <p class="wow fadeInUp" data-wow-duration="0.5s">
                                <i class="wi wi-fw wi-direction-up"></i>
                                <span>风向: </span><span id="current_wind_direction">暂无</span>
                            </p>
                            <p class="wow fadeInUp" data-wow-duration="0.5s">
                                <i class="wi wi-fw wi-strong-wind"></i>
                                <span>风力: </span><span id="current_wind_force">暂无</span>
                            </p>
                            <p class="wow fadeInUp" data-wow-duration="0.5s">
                                <i class="wi wi-fw wi-barometer"></i>
                                <span>&nbsp;AQI: </span>
                                <span id="current_aqi">暂无</span>
                                <label class="btn" id="current_aqi_icon" style="font-size: 18px"></label>
                            </p>
                            <p class="wow fadeInUp" data-wow-duration="0.5s">
                                <i class="wi wi-fw wi-humidity"></i>
                                <span>湿度: </span><span id="current_humidity">暂无</span><span>%</span>
                            </p>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <div class="fh5co-counter-style-2" style="background-image: url(/static/imgs/full_6.jpg);"
         data-stellar-background-ratio="0.5">
        <div class="fh5co-overlay"></div>
        <div class="container">
            <div class="fh5co-section-content-wrap">
                <div class="fh5co-section-content">
                    <div class="row p-b">
                        <div class="col-md-12 text-center">
                            <h2 class="fh5co-heading wow fadeInUp" style="color: #e6e6e6;"
                                data-wow-duration="1s"
                                data-wow-delay=".5s">今日概况</h2>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 text-center wow fadeInUp" data-wow-duration="1s"
                             data-wow-delay="1.1s">
                            <div class="icon">
                                <i class="wi wi-sunrise"></i>
                            </div>
                            <span class="fh5co-counter" id="today_sunrise"></span>
                            <span class="fh5co-counter-label">日出</span>
                        </div>

                        <div class="col-md-3 text-center wow fadeInUp" data-wow-duration=".5s"
                             data-wow-delay=".5s">
                            <div class="icon">
                                <i class="wi wi-thermometer" id="today_temp_icon"></i>
                            </div>
                            <span class="fh5co-counter" id="today_temp"></span>
                            <span class="fh5co-counter-label">温度</span>

                        </div>
                        <div class="col-md-3 text-center wow fadeInUp" data-wow-duration=".5s"
                             data-wow-delay=".8s">
                            <div class="icon">
                                <i class="wi" id="today_weather_icon"></i>
                            </div>
                            <span class="fh5co-counter" id="today_weather">暂无</span>
                            <span class="fh5co-counter-label">天气</span>
                        </div>
                        <div class="col-md-3 text-center wow fadeInUp" data-wow-duration="1s"
                             data-wow-delay="1.1s">
                            <div class="icon">
                                <i class="wi wi-moonrise"></i>
                            </div>
                            <span class="fh5co-counter" id="today_sunset"></span>
                            <span class="fh5co-counter-label">日落</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 24 小时详情 -->
    <div class="fh5co-project-style-1">
        <div class="container">
            <div class="row p-b">
                <h2 class="fh5co-heading wow fadeInUp text-center" data-wow-duration="1s"
                    data-wow-delay="0s">24小时天气详情</h2>
                <div class="fh5co-heading wow fadeInUp col-xs-12 text-center" data-wow-duration="1s"
                     data-wow-delay=".7s">
                    <label class="label label-warning">温度</label>
                    <label class="label label-success">降水量</label>
                    <label class="label label-primary">湿度</label>
                    <label class="label label-default">空气质量</label>
                    <div id="24hour-chart"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 未来三天预报-->
    <div class="fh5co-project-style-2" id="forecast_part">

        <div class="fh5co-projects">
            <ul>
                <li class="wow fadeInUp" style="background-image: url(/static/imgs/full_1.jpg);"
                    data-wow-duration=".5s" data-wow-delay=".5s"
                    data-stellar-background-ratio="0.5">
                    <a href="javascript:void(0)">
                        <div class="fh5co-overlay"></div>
                        <div class="container">
                            <div class="fh5co-text">
                                <div class="fh5co-text-inner text-center">
                                    <div class="row">
                                        <div class="col-md-12"><h2 style="color: #e6e6e6">
                                            未来三天天气</h2></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                <li class="wow fadeInUp" style="background-image: url(/static/imgs/full_2.jpg);"
                    data-wow-duration=".5s" data-wow-delay=".5s"
                    data-stellar-background-ratio="0.5">
                    <a href="javascript:void(0)">
                        <div class="fh5co-overlay"></div>
                        <div class="container">
                            <div class="fh5co-text">
                                <div class="fh5co-text-inner forecast_day">
                                    <div class="row">
                                        <div class="col-md-4"><h3>Day 1</h3></div>
                                        <div class="col-md-4"><p class="p1">DayWeather</p></div>
                                        <div class="col-md-4"><p class="p2">NightWeather</p></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                <li class="wow fadeInUp" style="background-image: url(/static/imgs/full_2.jpg);"
                    data-wow-duration=".5s" data-wow-delay=".7s"
                    data-stellar-background-ratio="0.5">
                    <a href="javascript:void(0)">
                        <div class="fh5co-overlay"></div>
                        <div class="container">
                            <div class="fh5co-text">
                                <div class="fh5co-text-inner forecast_day">
                                    <div class="row">
                                        <div class="col-md-4"><h3>Day 2</h3></div>
                                        <div class="col-md-4"><p class="p1">DayWeather</p></div>
                                        <div class="col-md-4"><p class="p2">NightWeather</p></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                <li class="wow fadeInUp" style="background-image: url(/static/imgs/full_2.jpg);"
                    data-wow-duration=".5s" data-wow-delay=".9s"
                    data-stellar-background-ratio="0.5">
                    <a href="javascript:void(0)">
                        <div class="fh5co-overlay"></div>
                        <div class="container">
                            <div class="fh5co-text">
                                <div class="fh5co-text-inner forecast_day">
                                    <div class="row">
                                        <div class="col-md-4"><h3>Day 3</h3></div>
                                        <div class="col-md-4"><p class="p1">DayWeather</p></div>
                                        <div class="col-md-4"><p class="p2">NightWeather</p></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                <li class="wow fadeInUp" style="background-image: url(/static/imgs/full_2.jpg);"
                    data-wow-duration=".5s" data-wow-delay=".7s"
                    data-stellar-background-ratio="0.5">
                    <a th:href="@{/weather/forecast/}">
                        <div class="fh5co-overlay"></div>
                        <div class="container">
                            <div class="fh5co-text">
                                <div class="fh5co-text-inner">
                                    <div class="row text-center">
                                        <div class="col-md-12"><p>查看更多</p></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>

            </ul>
        </div>
    </div>

    <div class="fh5co-footer-style-3">
        <div class="container">
            <div class="row p-b">
                <div class="col-md-offset-3 col-md-3 col-sm-6 fh5co-footer-widget wow fadeInUp"
                     data-wow-duration=".5s" data-wow-delay=".7s">
                    <div class="fh5co-logo"><span class="logo">Hi</span> Weather</div>
                    <p class="fh5co-copyright">&copy; 2016 vito. <br/>All Rights Reserved. <br/>
                    </p>
                </div>
                <div class="col-md-offset-2 col-md-3 col-sm-6 fh5co-footer-widget wow fadeInUp"
                     data-wow-duration=".5s" data-wow-delay=".9s">
                    <h3>关于</h3>
                    <p>凌志远的毕业设计</p>
                    <p><a href="Mailto:dev_vito@163.com" class="btn btn-success btn-sm btn-outline">联系我</a></p>
                </div>
                <div class="clearfix visible-sm-block"></div>
            </div>
            <div class="row fh5co-made">
                <div class="col-md-12 wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".5s">
                    <p><i class="heart icon-heart"></i></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END footer -->

</div>
<!-- END page-->

<!-- Modal -->
<div class="modal fade" id="location_modal" tabindex="-1" role="dialog"
     aria-labelledby="location_modal_label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="location_modal_label">更改城市</h4>
            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col-md-push-3 col-md-6">
                        <div class="form-group">
                            <label for="switch_province"> 省/直辖市 </label>
                            <select class="form-control" id="switch_province">
                                <option>北京</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-push-3 col-md-6">
                        <div class="form-group">
                            <label for="switch_city"> 城市 </label>
                            <select class="form-control" id="switch_city">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-push-3 col-md-6">
                        <div class="form-group">
                            <label for="switch_district"> 县级市/县 </label>
                            <select class="form-control" id="switch_district">
                            </select>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    取消
                </button>
                <button type="button" id="confirm_switch_location" class="btn btn-primary ">
                    确认
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- jQuery -->
<script th:src="@{/static/lib/js/jquery-2.1.1.min.js}"></script>
<!-- jQuery Easing -->
<script th:src="@{/static/lib/js/jquery.easing.1.3.js}"></script>
<!-- BOOTSTRAP JS -->
<script th:src="@{/static/lib/js/bootstrap.min.js}"></script>
<!-- Waypoints -->
<script th:src="@{/static/lib/js/jquery.waypoints.min.js}"></script>
<!-- Owl Carousel -->
<script th:src="@{/static/lib/js/owl.carousel.min.js}"></script>
<!-- Magnific Popup -->
<script th:src="@{/static/lib/js/jquery.magnific-popup.min.js}"></script>
<!-- Stellar -->
<script th:src="@{/static/lib/js/jquery.stellar.min.js}"></script>
<!-- countTo -->
<script th:src="@{/static/lib/js/jquery.countTo.js}"></script>
<!-- WOW -->
<script th:src="@{/static/lib/js/wow.min.js}"></script>

<!--[if IE 8]>

<h1>Your browser is out of date, please update your browser by going to
    www.microsoft.com/download</h1>

<![endif]-->

<script th:src="@{/static/lib/js/moment-with-locales.min.js}"></script>

<!-- PAGE RELATED PLUGIN(S) -->
<script th:src="@{/static/lib/smartadmin/js/plugin/morris/raphael.min.js}"></script>
<!--<script th:src="@{/static/lib/smartadmin/js/plugin/morris/morris-chart-settings.min.js}"></script>-->
<script th:src="@{/static/lib/smartadmin/js/plugin/morris/morris.min.js}"></script>

<!--必须按顺序将 base.js 放在最下面 -->
<script th:src="@{/static/js/location2.js}"></script>
<script th:src="@{/static/js/weather.js}"></script>
<script th:src="@{/static/js/base.js}"></script>
<script th:src="@{/static/js/switch-location-modal.js}"></script>

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    $(function () {

        new WOW().init();

        $('#district_name').text(window.currentDistrict.title);

        var currentWeather = getCurrentWeather(window.currentDistrict.id)
        if (currentWeather != null) {
            $('#current_weather').text(parseWeatherCodeStr(currentWeather.weather))
            $('#current_weather_icon').addClass(codeToClass[currentWeather.weather])
            if(currentWeather.aqi == -1){
                $('#current_aqi').text("暂无")
            }else{
                $('#current_aqi').text(currentWeather.aqi)
            }
            var aqiCode = findAQICodeByCode(findAQICodeByValue(currentWeather.aqi))
            $('#current_aqi_icon').addClass(aqiCodeToClass[aqiCode.code]).text(aqiCode.name)
            $('#current_humidity').text(currentWeather.humidity)
            $('#current_temperature').text(currentWeather.temperature)
            $('#current_wind_direction').text(findWindDirectionCodeByCode(currentWeather.wind_direction).name_ch)
            $('#current_wind_force').text(parseForceCodeStr(currentWeather.wind_force))
        }

        var todayWeather = getTodayWeather(window.currentDistrict.id)
        if (todayWeather != null) {

            $('#today_weather_icon').addClass(codeToClass[todayWeather.w_day])
            $('#today_sunrise').text(todayWeather.sunrise)
            $('#today_sunset').text(todayWeather.sunset)
            if (todayWeather.t_day <= todayWeather.t_night) {
                $('#today_temp').text(todayWeather.t_day + "°C ~ " + todayWeather.t_night + "°C")
            } else {
                $('#today_temp').text(todayWeather.t_night + "°C ~ " + todayWeather.t_day + "°C")
            }
            if (todayWeather.w_day == todayWeather.w_night) {
                $('#today_weather').text(parseWeatherCodeStr(todayWeather.w_day))
            } else {
                $('#today_weather').text(parseWeatherCodeStr(todayWeather.w_day + "," + todayWeather.w_night))
            }
        }

        var provinceSelect = $('#switch_province');
        var citySelect = $('#switch_city');
        var districtSelect = $('#switch_district');

        // 区域切换的Modal初始设置
        locationModal(provinceSelect, citySelect, districtSelect);
        // 初始化location 选择列表
        changeProvinces();

        $('#confirm_switch_location').click(function () {
            changeCurrentDistrictById(selectedDistrictId)
            changeCurrentCityById(selectedCityId)
            changeCurrentProvinceById(selectedProvinceId)
            window.location.reload()
        })

        var data24h = [];
        $.ajax({
            url: /*[[@{/weather/today/24h}]]*/"",
            data: {districtId: currentDistrict.id},
            dateType: 'json',
            success: function (data) {
                data24h = data.data
                var config = {
                    data: data24h,
                    xkey: 'datetime',
                    ykeys: ['temperature', 'precipitation', 'humidity', 'aqi'],
                    labels: ['温度', '降水量', '湿度', '空气质量'],
                    fillOpacity: 0.0,
                    hideHover: 'auto',
                    dateFormat: function (datetime) {
                        var parsedDate = new Date(datetime);
                        var M = (parsedDate.getMonth() + 1 < 10 ? '0' + (parsedDate.getMonth() + 1) : parsedDate.getMonth() + 1) + '-';
                        var D = parsedDate.getDate() + ' ';
                        var h = parsedDate.getHours() + ':';
                        var m = (parsedDate.getMinutes() < 10 ? '0' + (parsedDate.getMinutes()) : parsedDate.getMinutes);
                        return M + D + h + m
                    },
                    behaveLikeLine: true,
                    resize: true,
                    numLines: 5,
                    gridTextSize: 15,
                    gridTextColor: '#b3b3b3',
                    pointFillColors: ['#ffffff'],
                    pointStrokeColors: ['#333333'],
                    lineColors: ['#c79121', '#739e73', '#3276b1', '#999999']
                };

                config.element = '24hour-chart';
                Morris.Line(config);
            }
        });

        // 获取未来三天天气
        var threeDaysWeatherData = []
        $.ajax({
            url: /*[[@{/weather/forecast/three}]]*/"",
            data: {districtId: window.currentDistrict.id},
            dataType: "json",
            success: function (data) {
                $.each(data.data, function (index, val) {
                    threeDaysWeatherData.push(val)
                })
                forecast3d(threeDaysWeatherData)
            },
            fail: function () {
                alert("未来三天天气获取失败")
            }
        })

        function forecast3d(data) {
            if (data.length != 0) {
                $('.forecast_day').each(function (index, val) {

                    var weather = data[index]
                    var weatherDay = parseWeatherCodeStr(weather.weather_day)
                    var weatherNight = parseWeatherCodeStr(weather.weather_night)
                    var windDirectionDay = findWindDirectionCodeByCode(weather.wind_direction_day).name_ch
                    var windDirectionNight = findWindDirectionCodeByCode(weather.wind_direction_night).name_ch
                    var windForceDay = parseForceCodeStr(weather.wind_force_day)
                    var windForceNight = parseForceCodeStr(weather.wind_force_night)
                    var icon_day = $('<i class="wi"></i>');
                    var icon_night = $('<i class="wi"></i>');
                    icon_day.addClass(codeToClass[weather.weather_day.split(",")[0]])
                    icon_night.addClass(codeToClass[weather.weather_night.split(",")[0]])

                    $(val).find("h3").text(moment(weather.date, 'YYYY-MM-DD').format('M月D日') + "(" + moment(weather.date, 'YYYY-MM-DD').format('dddd') + ")")
                    $(val).find("p.p1").text("")
                            .append($("<span>日: </span>"))
                            .append(icon_day)
                            .append($("<span></span>").text("" + weatherDay + " " + weather.max + "°C" + " " + windDirectionDay + " " + windForceDay))
                    $(val).find("p.p2").text("")
                            .append($("<span>夜: </span>"))
                            .append(icon_night)
                            .append($('<span></span>').text(weatherNight + " " + weather.min + "°C" + " " + windDirectionNight + " " + windForceNight))

                })
            }

        }
    });

    /*]]>*/
</script>


<!-- Main -->
<script th:src="@{/static/lib/js/main.js}"></script>

</body>
</html>
